Homework 4 - Designing a navigation strategy
In this phase of our project, we turn our attention to the critical aspect of navigation within the Dynamic Calling Card (DCC). Building on the visual and interactive components developed in earlier assignments, Homework 4 challenges us to design a navigation system that is both intuitive and engaging. Utilizing Figma, we aim to create a prototype that demonstrates how users will move between different panels of the DCC, ensuring a smooth and coherent experience. This report documents the design process, the decisions made, and the rationale behind the chosen navigation strategy, setting the stage for its future implementation in P5JS.
Journey of a young man
Introduction
The story of the young man unfolds through a journey of self-discovery, passion, and growth. From the strumming of his guitar on a stage filled with passion, navigating adventures on the open sea, to embracing diversity through community engagement, and innovating for a sustainable future in his lab. He explores his creativity in a vibrant art studio, stands resilient against life’s challenges, and fosters deep connections with those around him. His journey, marked by curiosity and the empowerment of others, culminates in a moment of serene reflection, symbolizing the harmonious balance he’s achieved. Through diverse experiences, he learns the value of each facet of his life, weaving them into a rich tapestry that defines his unique path.
The purpose of the naviagation strategy is for the card viewers to understand a beautify jouney of a young man but going through each picture by clicking arrows.
Calling Card
Joel John
Computer Science B.s
Passion
Description: A young man, guitar in hand, stands illuminated on stage, lost in a powerful performance. His eyes are closed, a gesture of deep immersion in the music, as notes fill the air around him.
Message: This scene is a vivid portrayal of passion, depicting the transformative power of connecting deeply with one’s art. It underscores the idea that pursuing what one loves can elevate the spirit and touch the hearts of others.
Adventure
Description: Against the backdrop of a vast ocean and a sky painted with the hues of dawn, a young man steers a sailboat with a look of determination. The expansive sea before him mirrors the boundless nature of his adventurous spirit.
Message: This image evokes the essence of adventure — a call to embrace the journey of life with courage and an open heart. It reminds us that every horizon promises new discoveries and personal growth.
Creativity
Description: In a bright studio filled with art supplies, a young man paints passionately, surrounded by vibrant canvases.
Message: This image emphasizes the essence of creativity—transforming imagination into art that reflects the soul’s unique language.
Diversity
Description: In the green expanse of a community park, a young man kneels to plant a tree, surrounded by a mosaic of individuals each contributing to the task. Their collective action paints a picture of unity in diversity.
Message: The picture celebrates diversity, not just as a concept, but as a living, breathing practice of coming together to enrich our communities. It shows that our differences, when harmonized, can foster a sustainable and vibrant world.
Innovation
Description: Inside a bustling lab filled with the glow of screens and the promise of tomorrow, a young man examines a solar energy prototype. Around him, technology and greenery coexist, symbolizing a bridge between human ingenuity and environmental care.
Message: This scene champions the spirit of innovation, particularly in pursuit of sustainability. It illustrates that through creativity and technological advancement, we can forge solutions that respect and preserve our planet for future generations.
Resilience
Description: Atop a rugged peak, a young man stands firm, facing the onslaught of a tempest. His posture is one of defiance and strength, a testament to his resilience against the elements and the challenges they represent.
Message: This powerful imagery serves as a metaphor for resilience in the face of life’s storms. It conveys that enduring hardships with strength and determination can lead us to emerge stronger, more grounded, and prepared for whatever comes our way.
Journey - The End
Description: The scene unfolds in a tranquil landscape at twilight, capturing the essence of a young man’s journey. Elements from his life—his guitar, the sailboat, a vibrant garden, and a technology-filled lab—are harmoniously integrated into the serene setting. Each object tells a part of his story, from his passion for music and adventure to his commitment to sustainability and innovation.
Message: This image serves as a testament to the power of embracing diverse interests and experiences. It reflects the idea that the journey of self-discovery and growth is a mosaic of our passions, challenges, and achievements, leading to a fulfilling and well-rounded life. The phrase “journey’s end.” not only marks a conclusion but also celebrates the beginning of new chapters, reminding us that every end is just a new beginning waiting to unfold.
Figma mockup
- Simply click the arrow icons to navigate through each panels.
User Testing
I shared it with my close friend. I asked him how it looks like and is it user-friendly. He said it is user-friendly and he was able to understand most of themes of the young man’s journey. Though, I could improve on making it look better and be more creative.
Reflection
I really enjoyed working on this assignment. The most satisfying this is definitely testing out the app by navigating through the panels by clicking icons. The most difficult would be trying to understand how figma works like how to connect between frames and bringing in icons. If I had more time I would spent time time making it look better and be creative like my friend suggested.